// Navigate路由重定向
import { Navigate } from "react-router-dom"
import React, { lazy } from "react"
import { JSX } from "react/jsx-dev-runtime"

import Home from "../views/Home"
import Login from "../views/Login"
const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))
const Page301 = lazy(() => import("../views/Page301"))
const Page302 = lazy(() => import("../views/Page302"))
const Page303 = lazy(() => import("../views/Page303"))
const Page401 = lazy(() => import("../views/Page401"))
const Page402 = lazy(() => import("../views/Page402"))
const Page5 = lazy(() => import("../views/Page5"))

const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        { comp }
    </React.Suspense>
)

const routers = [
    // 嵌套路由
    {
        path: "/",
        element: <Navigate to="/Page1" />
    },
    {
        path: '*',
        element: <Navigate to="/Page1" />
    },
    {
        path: "/login",
        element: <Login />
    },
    {
        path: "/",
        element: <Home />,
        children: [
            {
                path: "/page1",
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: "/page2",
                element: withLoadingComponent(<Page2 />)
            },
            {
                path: "/page3/page301",
                element: withLoadingComponent(<Page301 />)
            },
            {
                path: "/page3/page302",
                element: withLoadingComponent(<Page302 />)
            },
            {
                path: "/page3/page303",
                element: withLoadingComponent(<Page303 />)
            },
            {
                path: "/page4/page401",
                element: withLoadingComponent(<Page401 />)
            },
            {
                path: "/page4/page402",
                element: withLoadingComponent(<Page402 />)
            },
            {
                path: "/page5",
                element: withLoadingComponent(<Page5 />)
            }
        ]
    }
]
export default routers